<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Hello World</title>
    <style type="text/css">html {
        height: 100%
    }

    body {
        height: 100%;
        margin: 0px;
        padding: 0px
    }

    #container {
        height: 100%
    }</style>
    <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
    <script src="SquareOverlay.js" type="text/javascript"></script>

</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var mp = new BMap.Map("container");
    var point = new BMap.Point(116.404, 39.915);
    mp.centerAndZoom(point, 15);
   /* var marker = new BMap.Marker(point);
    mp.addOverlay(marker);*/

    function addMarker(point, index) {
        var myIcon = new BMap.Icon("markers.png",
                new BMap.Size(23, 25),
                {
                    offset:new BMap.Size(10, 25),
                    imageOffset:new BMap.Size(0, 0 - index * 25)

                }
        );
       // var marker = new BMap.Marker(point, {icon:myIcon});
        var marker = new BMap.Marker(point);
        marker.addEventListener('click',function()
        {
            alert("xieql");
        });
     marker.enableDragging();

        marker.addEventListener('dragend',function(e){
            alert('当前位置:'+e.point.lng+','+ e.point.lat);
        });




        mp.addOverlay(marker);
    }

    var bounds = mp.getBounds();
    var lngSpan = bounds._neLng - bounds._swLng;
    var latSpan = bounds._neLat - bounds._swLat;
    for (var i = 0; i < 10; i++) {
        var point = new BMap.Point(bounds._swLng + lngSpan * (Math.random() * 0.7 + 0.15),
                bounds._swLat + latSpan * (Math.random() * 0.7 + 0.15));
        addMarker(point, i);
    }

    var opts={
        width:100,
        height:100,
        title:"hello"

    };
//    var infoWindow=new BMap.InfoWindow("world",opts);
//    mp.openInfoWindow(infoWindow,mp.getCenter());

//    var polyline = new BMap.Polyline([
//        new BMap.Point(116.399, 39.910),
//        new BMap.Point(116.405, 39.920)
//    ],
//            {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
//    );
//    mp.addOverlay(polyline);

    // 添加自定义覆盖物
    var mySquare = new SquareOverlay(mp.getCenter(), 100, "red");
    mp.addOverlay(mySquare);

</script>
</body>
</html>